<template>
	<!-- <view class="content"> -->
	<scroll-view scroll-y="true">
		<!-- <button @click="deletePerson()" v-if="!isAdd">删除（后面需要移动位置）</button> -->
		<!-- <view class="search-view" v-if="isAdd"> -->
		<view class="search-view" v-if="isAdd">
			<view class="cus-search-component search-button">
				<input confirm-type="search" v-model="searchData.search_key" @input="getPersonInfo()" placeholder="输入电话/手机/供应商" />
			</view>
			<view class="search-list content">
				<uni-popup type="top" :show="showPopup" @hidePopup="togglePopup" :popupTop="95" :popupWidth="750" :msg="searchList.length===0?'没搜索到相关数据...':''">
					<scroll-view class="uni-center center-box" scroll-y="true">
						<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="item in searchList" :key='item.id' @click="clickSearchItem(item)">
							<view class="uni-list-cell-navigate">
								<text>{{item.name}} {{item.mobile}} {{item.supplier}}</text>
							</view>
						</view>
					</scroll-view>
				</uni-popup>
			</view>
		</view>
		<view class="content">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-list-cell-navigate">
					<text>手机号</text>
					<input class="right-text" type="number" placeholder="请输入手机号" v-model="formData.mobile" :disabled="!isAdd" />
				</view>
			</view>
			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-list-cell-navigate">
					<text>姓名</text>
					<input class="right-text" placeholder="请输入姓名" v-model="formData.name" :disabled="!isAdd" />
				</view>
			</view>
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="showType()">
				<view class="uni-list-cell-navigate" :class="isAdd?'uni-navigate-right':''">
					<text>工种</text>
					<text class="right-text">{{work_type_name}}</text>
				</view>
			</view>
			<mpvue-picker ref="mpvueTypeRef" :deepLength="1" @onConfirm="onTypeConfirm" :pickerValueArray="typeArray"
			 :pickerValueDefault="formData.role"></mpvue-picker>

			<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="showRole()">
				<view class="uni-list-cell-navigate" :class="isAdd?'uni-navigate-right':''">
					<text>角色</text>
					<text class="right-text">{{role_name}}</text>
				</view>
			</view>
			<mpvue-picker ref="mpvueRoleRef" :deepLength="1" @onConfirm="onRoleConfirm" :pickerValueArray="roleArray"></mpvue-picker>
			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-list-cell-navigate">
					<text>供应商</text>
					<input class="right-text" placeholder="请输入供应商" v-model="formData.supplier" :disabled="!isAdd" />
				</view>
			</view>
		</view>
		<button class="submit-button" type="primary" @click="addSubmit" v-if="isAdd">保存</button>
		<!-- #ifdef MP-WEIXIN -->
		<uni-fab v-if="isFromMain ==='false'" :horizontal="horizontal" :vertical="vertical" uniIcon="trash" @longpress="fadlongpress" @onlyOne="deletePerson()"></uni-fab>
		<!-- #endif -->
	</scroll-view>
	<!-- </view> -->
</template>

<script>
	import {
		typeArray,
		roleArray
	} from '../../../common/stateData.js'
	export default {
		data() {
			return {
				isAdd: false, //是否是新增页面
				typeArray: typeArray, //工种类型数据
				roleArray: roleArray, //角色类型数据
				role_name: '',
				work_type_name: '',
				id: null,
				type: '',
				formData: {
					hard_id: null,
					work_type: '', //工种类型
					role: '', //角色类型
					supplier: '', //供应商
					mobile: '', //手机号码
					name: '', //姓名
				},
				//搜索条件
				searchData: {
					search_key: ''
				},
				searchList: [], //搜索获得的数据
				showPopup: false,
				isFromMain:"false",
				horizontal: 'left',
				vertical: 'bottom'
			}
		},
		onLoad(param) {
			this.formData.hard_id = parseInt(param.hard_id)
			this.isFromMain=param.isFromMain
			if (param.id) {
				//是编辑页面
				this.isAdd = false
				this.id = parseInt(param.id)
				this.type = param.type
				//从主入口进去，还是详情页面时
				if(this.isFromMain==='true'){
					uni.setNavigationBarTitle({
						title: "成员详情"
					})
				}
				//获取详情信息
				this.getPersonDetail()
			} else {
				//是新增页面
				this.isAdd = true
				this.setAppBarButton()
				uni.setNavigationBarTitle({
					title: "成员新增"
				})
			}
			//是从主入扣进来的不让有删除的按钮
			if(this.isFromMain==='true'){
				this.setAppBarButton()
			}
		},
		onNavigationBarButtonTap() {
			if(this.isFromMain!=='true'){
				this.deletePerson()
			}
		},
		methods: {
			fadlongpress() { // 悬浮按钮长按
				if (this.vertical === 'top') {
					this.vertical = 'bottom'
				} else {
					this.vertical = 'top'
				}
			},
			//编辑页面导航栏右上角需要删除按钮，添加的时候置为空
			setAppBarButton() {
				let pages = getCurrentPages();
				let page = pages[pages.length - 1];
				// #ifdef APP-PLUS
				let currentWebview = page.$getAppWebview();
				let titleObj = currentWebview.getStyle().titleNView;
				if (!titleObj.buttons) {
					return;
				}
				titleObj.buttons[0].text = '';
				currentWebview.setStyle({
					titleNView: titleObj
				});
				// #endif
			},
			//显示工种类型选择器
			showType() {
				if (this.isAdd) {
					this.$refs.mpvueTypeRef.show()
				}
			},
			//工种类型确认
			onTypeConfirm(e) {
				this.formData.work_type = e.value[0]
				this.work_type_name = e.label
			},
			//显示角色类型选择器
			showRole() {
				if (this.isAdd) {
					this.$refs.mpvueRoleRef.show()
				}
			},
			//角色类型确认
			onRoleConfirm(e) {
				this.formData.role = e.value[0]
				this.role_name = e.label
			},
			//搜索列表显示与否
			togglePopup() {
				this.showPopup = !this.showPopup
			},
			//点击搜索出来的某一列表行
			clickSearchItem(item) {
				this.showPopup = false
				this.formData = {
					...this.formData,
					...item
				}
			},
			//获取搜索的值
			getPersonInfo() {
				this.showPopup = true
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/resource_list',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						...this.searchData
					},
					success: res => {
						console.log(res)
						if (res.data.code === 1) {
							this.searchList = res.data.data.list
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			//编辑页面，获取详情信息
			getPersonDetail() {
				uni.showLoading({
					title: '',
					mask: false
				});
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/app_hard_address_info',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						id: this.id,
						type: this.type,
					},
					success: res => {
						if (res.data.code === 1) {
							this.formData = {
								...this.formData,
								...res.data.data.info
							}
							const type = typeArray.filter((item, index) => {
								return item.value === this.formData.work_type
							})
							this.work_type_name = type.length > 0 ? type[0].label : ''
							const role = roleArray.filter((item, index) => {
								return item.value === this.formData.role
							})
							this.role_name = role.length > 0 ? role[0].label : ''
						}
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			//删除人员(只有编辑页面才有删除)
			deletePerson() {
				uni.showModal({
					title: '提示',
					content: '是否确定删除？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '',
								mask: false
							});
							uni.request({
								url: this.$store.state.baseUrl + '/lwj/app_hard_address_delete',
								method: 'POST',
								header: {
									token: this.$store.state.token
								},
								data: {
									hard_id: this.formData.hard_id,
									id: this.id,
									type: this.type
								},
								success: res => {
									uni.hideLoading()
									if (res.data.code === 1) {
										uni.showToast({
											title: '成功,返回列表',
											mask: false,
											duration: 1500
										});
										this.goPersonalManager()
									} else if (res.data.code === 0) {
										//没有权限删除的时候
										uni.showToast({
											title: res.data.msg,
											mask: false,
											duration: 1500,
											icon: 'none'
										});
									}
								},
								fail: () => {},
								complete: () => {}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//新增人员提交
			addSubmit() {
				uni.showLoading({
					title: '',
					mask: false
				});
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/app_hard_address_create',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						...this.formData
					},
					success: res => {
						uni.hideLoading()
						if (res.data.code === 1) {
							//成功
							uni.showToast({
								title: '成功,返回列表',
								mask: false,
								duration: 1500
							});
							this.goPersonalManager()
						} else if (res.data.code === 0) {
							uni.showToast({
								title: res.data.msg,
								mask: false,
								duration: 1500,
								icon: 'none'
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			//返回人员管理列表
			goPersonalManager() {
				setTimeout(() => {
					uni.navigateTo({
						url: './personalManager?id=' + this.formData.hard_id,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}, 1500)
			}
		}
	}
</script>

<style scoped>
	.content,
	.center-box {
		background-color: #FFFFFF;
	}

	.center-box {
		max-height: 500upx;
		border-radius: 10upx;
	}

	.uni-list-cell-navigate text,
	.uni-list-cell-navigate input {
		flex: 1;
	}

	.right-text,
	picker {
		margin-right: 25upx;
		text-align: right;
	}

	.search-button {
		z-index: 999;
		position: relative;
		margin: 20upx;
	}

	.submit-button {
		margin: 15upx;
	}
</style>
